<template>
  <div
    class="main-app"
  >
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 36px;">
        <el-form-item label="点位搜索" style="font-weight: unset;">
          <el-input v-model="formInline.user" type="seatch" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="区域搜索">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option v-for="itme in changeAll" :key="itme.statusId" :value="itme.name" :label="itme.name" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="seatchlist"> <i class="el-icon-search" style="padding-right: 3px;" />查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="loading" class="result">
      <div class="buttonoper">
        <el-button type="warning" class="btton1" @click="isshowaaa = true"><i class="el-icon-circle-plus-outline" /> 新建</el-button>
      </div>
      <template>
        <el-table
          empty-text="暂无数据"
          :data="newGoodlist.currentPageRecords"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="name"
            label="点位名称"
            width="200"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="region.name"
            label="所在区域"
            width="220"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="businessType.name"
            label="商品类型"
            width="200"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="ownerName"
            label="合作商"
            width="220"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="name"
            label="详情地址"
            width="230"
            align="center"
            header-align="center"
          />
          <el-table-column
            width="250"
            label="操作"
            align="center"
            header-align="center"
          >
            <!-- <el-button type="primary">查看详情</el-button> -->
            <template slot-scope="scope">
              <a style="color: #5f84ff;" @click="chankan(scope.row)">查看详情</a> &nbsp;
              <a style="color: #5f84ff;" @click="Modify(scope.row)">修改</a>  &nbsp;
              <a style="color:red;" @click="deledianwei(scope.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="bottter">
        <div class="left11">
          <div>共 <span> {{ newGoodlist.totalCount }} </span>条数据 第 <span>{{ newGoodlist.pageIndex }}</span> / <span>{{ newGoodlist.totalPage }}</span> 页  </div>
        </div>
        <div class="right22">
          <el-button class="right22button" :disabled="newGoodlist.pageIndex <= 1" @click="[loading = true,getlist(0)]">上一页</el-button>
          <el-button class="right22button" :disabled="newGoodlist.pageIndex >= newGoodlist.totalPage" @click="[loading = true,getlist(1)]">下一页</el-button>
        </div>
      </div>
    </div>
    <point2 ref="pointa" :arealist="changeAll" :dialog-visible.sync="isshowaaa" @changelist="getgoodlist" />
    <point2xia v-if="ishowbb" :id="di" :dialog-visible.sync="ishowbb" />
  </div>
</template>

<script>
import point2xia from './components/point2xiang.vue'
import { TextToCode } from 'element-china-area-data'
import point2 from './components/pointa2.vue'
import { getsearchApi, getchangeApi, deledianweiApi } from '@/api/point'
// import list from './list.vue'
export default {
  name: 'Mainindex',
  components: { point2, point2xia },
  data() {
    return {
      di: '',
      ishowbb: false,
      newGoodlist: [],
      formInline: {
        user: '',
        region: ''
      },
      loading: false,
      changeAll: [],
      loadingApp: true,
      pageIndex: 1,
      seatchlista: {},
      isshowaaa: false

    }
  },
  computed: {

  },
  watch: {
    stateend() {
      this.loading = false
    }
  },
  async created() {
    await this.getgoodlist()
    this.loadingApp = false
  },
  methods: {
    chankan(a) {
      this.di = a.id
      this.ishowbb = true
    },
    async deledianwei(a) {
      try {
        await this.$confirm('此操作将永久删除该点位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deledianweiApi(a.id)
        this.$message.success('删除成功')
        this.getgoodlist()
      } catch (error) {
        if (error === 'cancel') {
          console.log(error)
        } else {
          this.$message.error('点位下有售货机，不可删除')
        }
      }
    },
    // 获取列表
    async getgoodlist() {
      try {
        this.pageIndex = 1
        const res = await getsearchApi({ pageSize: 10000 })
        this.changeAll = res.data.currentPageRecords
        const { data } = await getchangeApi()
        this.newGoodlist = data
      } catch (error) {
        console.log(error)
      }
    },
    // 查询按钮
    onSubmit() {
    },
    // 删除
    delerow() {

    },
    // 修改
    Modify(a) {
      this.isshowaaa = true
      const b = []
      const c = []
      const e = a.addr.split('-').at(-1)
      const f = [...a.addr.split('-')]
      f.pop()
      f.forEach(sum => {
        b.push(sum)
        if (b.length === 1) {
          c.push(TextToCode[b])
        } else if (b.length === 2) {
          c.push(TextToCode[b[0]][b[1]])
        } else if (b.length === 3) {
          c.push(TextToCode[b[0]][b[1]][b[2]])
        }
      })
      const d = c.map(itme => itme.code)
      a.addr = d
      a.remark = e
      this.$refs.pointa.listIfon = { ...a }
    },
    // 获取列表
    async getlist(a) {
      try {
        if (a === 0) {
          --this.pageIndex
        } else if (a === 1) {
          ++this.pageIndex
        }
        const { data } = await getchangeApi({ pageIndex: this.pageIndex, ...this.seatchlista })
        // if (data.currentPageRecords.length === 0) {
        //   --this.pageIndex
        // }
        this.newGoodlist = data
      } catch (error) {
        console.log(error, '点位管理出错')
      } finally {
        this.loading = false
      }
    },
    // 按照条件查找
    seatchlist() {
      if (this.formInline.region) {
        const aa = this.changeAll.find(itme => itme.name === this.formInline.region)
        this.seatchlista.regionId = aa.id
      }
      this.seatchlista.name = this.formInline.user
      this.getlist()
    }

  }
}
</script>

  <style lang="scss">
    .bottter{
      margin-top: 40px;
      display: flex;
      justify-content:space-between;
      .left11{
        font-size: 16px;
        color: #999;
      }
      .right22button{
        height: 30px;
        padding: 0;
       padding-left: 10px;
       padding-right: 10px;
      }
    }
  .buttonoper{
      margin-bottom: 6px;
  }
  .el-table__header-wrapper{
          th{
             padding: 5px 0;
             background-color: rgb(243, 246, 251) !important;
      }
  }

  .btton1{
      display: flex;
      display: inline-block;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 80px!important;
      height: 36px;
      padding: 0;
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      border: none;
  }
  .button11{
      display: flex;
      display: inline-block;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 80px!important;
      height: 36px;
      padding: 0;
      background-color: #fbf4f0!important;
      border: none;
      color: #655b56!important;
  }
  .el-form-item__label{
      font-weight: 400 !important;
      color: unset !important;
  }
  </style>
  <style scoped lang="scss">
  .main-app{

      overflow: hidden;
      margin: 20px;
      .search{
          display: flex;
          overflow: hidden;
      height: 64px;
      -webkit-box-align: center;
      align-items: center;
      margin-bottom: 20px;
      padding-left: 17px;
      background-color: #fff;
      }
      .result{
          height: 673px;
          padding:20px;
          background-color: #fff;
      }
  }

  </style>
